<template>
  <div class="timing">
    <el-row style="margin-bottom:10px;">
      <el-col :span="24">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="服务名称">
            <el-input v-model="formInline.serverName" clearable placeholder="" />
          </el-form-item>
          <el-form-item>
            <el-button plain @click="()=>{
              page = 1
              getUserList()
            }"><Icon type="ios-search" />查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <!-- 按钮 -->
    <el-row style="margin-bottom:10px;">
      <el-col :span="24">
        <el-button type="primary" @click="addUser"><Icon type="md-add" />创建授权</el-button>
      </el-col>
    </el-row>
    <!-- 表格 -->
    <ykhttb ref="httbRef" :btnIsShow="{
        detile: true,
        operate: true,
        del: true,
        exportxml:true,
        power: false
    }" :table-col="tabUserList" 
    :table-data="tableUserData"
    width="300"
     @getDataDetileInfo="getDataDetileInfo"
      @deleteSelectData="deleteSelectData"/>
    <!-- 分页 -->
    <div style="text-align:right;margin-top:10px;">
      <el-pagination
        :current-page="page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <el-dialog :close-on-click-modal="false" :title="title" width="50%" :visible.sync="dialogTableVisible">
      <!-- 名称和路径必输 -->
      <el-form v-if="dialogTableVisible" ref="ruleForm" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm autoClass">
        <el-form-item label="选择服务" prop="appServiceId">
          <el-select class="el-input" v-model="ruleForm['appServiceId']" :disabled="disFlag" clearable placeholder="请选择">
              <el-option v-for="(item,index) in serverListOptions" :key="index" :label="item.serviceName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择授权对象" prop="authObjectId">
          <el-select class="el-input" v-model="ruleForm['authObjectId']" :disabled="disFlag" clearable placeholder="请选择">
              <el-option v-for="(item,index) in serverListOptions2" :key="index" :label="item.authObject" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="授权起始时间" prop="authStartTime">
          <el-date-picker
            v-model="ruleForm['authStartTime']"
            type="datetime"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            :disabled="disFlag"
            style="width: 100%;"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="授权终止时间" prop="authEndTime">
          <el-date-picker
            v-model="ruleForm['authEndTime']"
            type="datetime"
            style="width: 100%;"
            :disabled="disFlag"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="系统签名" prop="systemCode">
          <el-input v-model="ruleForm['systemCode']" :disabled="disFlag" clearable placeholder="客户端获取" />
        </el-form-item>
        <el-form-item label=" " prop="" v-if="!disFlag"> 
          <el-button @click="scSqCode">生成授权码</el-button>
        </el-form-item>
        <el-form-item label="" prop="authCode" style="width: 100%;">
          <el-input style="margin-bottom: 10px;" v-model="ruleForm['ti']" disabled/>
          <el-input type="textarea" v-model="ruleForm['authCode']" disabled/>
        </el-form-item>
      </el-form>
      <div v-if="!disFlag" style="text-align: center;">
        <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
        <el-button @click="resetForm('ruleForm')">返回</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import request from '@/utils/request'
export default {
  components: {
    
  },
  data() {
    return {
      title:"创建授权",
      disFlag:false,
      ruleForm:{
        "appServiceId": 0,
        "authCode": "",
        "authEndTime": "",
        "authObjectId": 0,
        "authStartTime": "",
        "authType": 0,
        "id": 0,
        "systemCode": "",
        "ti": ""
      },
      dialogTableVisible:false,
      depList: [],
      postList: [],
      formInline: {
        serverName: ''
      },
      tableUserData: [],
      tabUserList: [
        {
          key: 'serviceName',
          title: '服务名称'
        },
        {
          key: 'authStartTime',
          title: '起始时间'
        },
        {
          key: 'authEndTime',
          title: '到期时间'
        },
        {
          key: 'authObject',
          title: '授权对象'
        },
        {
          key: 'authCode',
          title: '授权码'
        },
        {
          key: 'status',
          title: '状态'
        }
      ],
      serverListOptions:[],
      serverListOptions2:[],
      total: 0,
      size: 10,
      page: 1
    }
  },
  created() {
    request({
          url: '/ht-projectverity/app/getAll',
          method: 'get'
        }).then(res => {
           this.serverListOptions = res.data
        })
        request({
          url: '/ht-projectverity/authobject/getAll',
          method: 'get'
        }).then(res => {
           this.serverListOptions2 = res.data
        })
  },
  mounted() {
    this.$nextTick(() => {
      this.getUserList()
    })
  },
  methods: {
    downLoadXls (res) {
    const fileNames = res.headers['content-disposition']
    if(fileNames) {
      //解码
      const fileName = decodeURIComponent(fileNames.match(/=(.*)$/)[1])
      // 处理返回的文件流
      const content =res.data
      const blob = new Blob([content],{
        type: "application/octet-stream; charset=utf-8"
      });
      if('download' in document.createElement('a')) {
        //非IE下载
        const a = document.createElement('a') //创建一个a标签
        a.download = fileName //指定文件名称
        a.style.display = 'none' //页面隐藏
        a.href = URL.createObjectURL(blob) // href用于下载地址
        document.body.appendChild(a) //插到页面上
        a.click() //通过点击触发
        URL.revokeObjectURL(a.href) //释放URL 对象
        document.body.removeChild(a) //删掉a标签
      }else{
        //IE10 + 下载
        navigator.msSaveBlob(blob,fileName)
      }
    }
  },
    exportXmlFun(v){
      request({
          url: '/ht-projectverity/authmanage/exportSignXml?id='+v.id,
          method: 'get'
        }).then(res => {
            this.downLoadXls(res)
        })
    },
    scSqCode(){
      request({
        url: '/ht-projectverity/authmanage/getSignCode',
        method: 'post',
        data:{
          "authEndTime":this.ruleForm.authEndTime,
          "authStartTime": this.ruleForm.authStartTime,
          "systemCode": this.ruleForm.systemCode
        }
      }).then(res => {
        if (res.code == 200) {
          this.ruleForm['ti'] = res.data.ti
          this.ruleForm['authCode'] = res.data.sign
        } else {
          that.$notify.error({
            title: '错误',
            message: res.msg
          })
        }
      })
    },
    resetForm(formName){
      this.dialogTableVisible = false
      const o = {}
      let keys = Object.keys(this.ruleForm)
      keys.forEach((item,index)=>{
        const v = this.ruleForm[item]
        if (typeof (v) === 'string') {
          o[item] = ''
        } else if (typeof (v) === 'number') {
          o[item] = ''
        } else if (typeof (v) === 'object') {
          if (v instanceof Array) {
            o[item] = []
          } else{
            o[item] = {}
          }
        }
      })
      this.ruleForm = JSON.parse(JSON.stringify(o))
    },
    submitForm(){
      if(this.title=='创建授权'){
        delete this.ruleForm.id
      }
      let that = this
      request({
        url: '/ht-projectverity/authmanage/saveUpdate',
        method: 'post',
        data:that.ruleForm
      }).then(res => {
        if (res.code == 200) {
          that.resetForm('ruleForm')
          that.getUserList()
        } else {
          that.$notify.error({
            title: '错误',
            message: res.msg
          })
        }
      })
    },
    deleteSelectData(v) {
      request({
        url: '/ht-projectverity/authmanage/delete?id='+v.id,
        method: 'post',
        data:{}
      }).then(res => {
        if (res.code == 200) {
          this.getUserList()
        } else {
          this.$notify.error({
            title: '错误',
            message: res.msg
          })
        }
      })
    },
    addUser() {
      this.title = '创建服务'
      this.resetForm()
      this.disFlag = false
      this.dialogTableVisible = true
    },
    getDataDetileInfo(v){
      this.title = ''
      this.disFlag = true
      let keys = Object.keys(this.ruleForm)
      keys.forEach((item,index)=>{
        this.$set(this.ruleForm,item,JSON.parse(v)[item])
      })
      this.dialogTableVisible = true
    },
    editRowData(v) {
      this.disFlag = false
      this.title = '修改服务'
      let keys = Object.keys(this.ruleForm)
        keys.forEach((item,index)=>{
          this.$set(this.ruleForm,item,JSON.parse(v)[item])
        })
      this.dialogTableVisible = true
    },
    handleSizeChange(v) {
      this.page = 1
      this.size = v
      this.getUserList()
    },
    handleCurrentChange(v) {
      this.page = v
      this.getUserList()
    },
    // 获取用户列表
    getUserList() {
      this.$refs.httbRef.isShowLoading(true)
      request({
        url: '/ht-projectverity/authmanage/getAuthManageList',
        method: 'post',
        data:{
          "serviceName":this.formInline.serverName,
          "size": this.size,
          "page": this.page,
          "authObject": ""
        }
      }).then(res => {
        this.tableUserData = res.data.records
        this.total = res.data.total
        this.$refs.httbRef.isShowLoading(false)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .timing{
    background:#fff;
    padding:20px;
  }
  .autoClass{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .autoClass .el-form-item{
    width:50%;
  }
</style>
